<template>
  <view>
	<!-- 普通弹窗 -->
	<uni-popup ref="popup"    @change="change">
		<view class="popup-content" ><text
			<slot name="content"></slot>
		</view>
	</uni-popup>
  </view>
</template>
<script>
  export default
  {
    // 组件名称
    name: 'yh-popup',
    // 组件
    components:
    {
    },
	//属性
    props:
    {
		//监听弹出层弹出
		isPopup:{
			type:Number,
			default:0
		},
		//弹出方向
		popUpType:{
			type:String,
			default:'bottom'
		}
		
    },
    // 数据
    data()
    {
        return {
          msg: '自定义组件',
		  isMounted:false
        }
    },
    // 计算属性
    computed:
    {
		
    },
    // 监听
    watch:
    {
		isPopup:{
			handler(newValue,oldValue)
			{
				console.log('newValue:'+newValue)
				console.log('oldValue:'+oldValue)
				
				if(newValue > 0)
				{
					this.$nextTick(()=>{
						this.$refs.popup.open(this.popUpType)
					})
				}
				else
				{
					this.$nextTick(()=>{
						this.$refs.popup.close()
					})
				}
				
			},
			immediate:true
		}
    },
    // 实例创建之前
    beforeCreate()
    {

    },
    // 创建
    created()
    {

    },
    // 挂载之前
    beforeMount()
    {

    },
    // 挂载 
    mounted()
    {

    },
    // 更新之前
    beforeUpdate()
    {

    },
    // 跟新后
    updated()
    {

    },
    // 销毁之前
    beforeDestroy()
    {

    },
    // 销毁后
    destroyed()
    {

    },
    // 方法
    methods:
    {
		change(e) {
			// console.log('当前模式：' + e.type + ',状态：' + e.show);
		},
    }
  }
</script>
<style lang='scss' scoped>
	.popup-content {
		width:750rpx;
		min-height: 100rpx;
		height:auto;
		border-radius: 64rpx 64rpx 0rpx 0rpx;
		background: #F4F4F4;
	}
</style>
